Skip to content
This repository has been archived by the owner on Apr 6, 2023. It is now read-only.

fix(nuxt): don't inline styles for per-request ssr: false #8106

Merged
merged 4 commits into from
Oct 12, 2022
Merged

fix(nuxt): don't inline styles for per-request ssr: false #8106

merged 4 commits into from
Oct 12, 2022

Conversation

Alex--C
Copy link
Contributor

@Alex--C Alex--C commented Oct 11, 2022 •
edited by danielroe
Loading

🔗 Linked issue

resolves nuxt/nuxt#15124
#7580

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality like performance)
  • ✨ New feature (a non-breaking change that adds functionality)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Currently, if SSR is enabled during build, the renderer tries to inline styles if process.env.NUXT_INLINE_STYLES is true.
It does not take the current request's ssrContext.noSSR into account.

This leads to an error if SSR is disabled dynamically (e.g. using the x-nuxt-no-ssr header in a server middleware):

[nuxt] [request error] [unhandled] [500] globalThis.__buildAssetsURL is not a function
  at ./.output/server/chunks/app/styles.mjs:7:276
  at ModuleJob.run (node:internal/modules/esm/module_job:185:25)
  at async Promise.all (index 0)
  at async ESMLoader.import (node:internal/modules/esm/loader:281:24)
  at async renderInlineStyles (./.output/server/chunks/handlers/renderer.mjs:453:20)
  at async ./.output/server/chunks/handlers/renderer.mjs:386:25
  at async ./.output/server/chunks/handlers/renderer.mjs:30:22
  at async ./.output/server/node_modules/h3/dist/index.mjs:592:19
  at async Server.nodeHandler (./.output/server/node_modules/h3/dist/index.mjs:538:7)

My change here disables style inlining if ssrContext.noSSR is true.

Resolves nuxt/nuxt#15124 and #7580 .

📝 Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@codesandbox
Copy link

codesandbox bot commented Oct 11, 2022

CodeSandbox logoCodeSandbox logo  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

@netlify
Copy link

netlify bot commented Oct 11, 2022 •
edited
Loading

✅ Deploy Preview for nuxt3-docs canceled.

Name Link
🔨 Latest commit d63bbdc
🔍 Latest deploy log https://app.netlify.com/sites/nuxt3-docs/deploys/6345f9052cf2a00009fb5dc7

@atinux atinux requested a review from danielroe October 11, 2022 12:06
@danielroe danielroe mentioned this pull request Oct 11, 2022
Merged
@danielroe
Copy link
Member

Ideally we would still render global inline styles with ssr: false. At the moment, the way we import asset URLs is with globalThis.__buildAssetsURL which is set here:

framework/packages/nuxt/src/core/templates.ts

Lines 243 to 244 in c404cb1

'globalThis.__buildAssetsURL = buildAssetsURL',
'globalThis.__publicAssetsURL = publicAssetsURL'

We could either set this manually in getSPARenderer or (better) somehow import paths.mjs in our emitted styles.mjs file.

Thoughts welcome.

@Alex--C
Copy link
Contributor Author

Alex--C commented Oct 12, 2022

Ideally we would still render global inline styles with ssr: false.

Wouldn't style inlining for SPA be a completely new feature? From what I understand, inlineSSRStyles is currently always false if the app is built without SSR enabled. This PR only addresses the issue that happens when the app is built with SSR enabled but then disabled during runtime.

@danielroe
Copy link
Member

Oh yes, you're quite right. I do think it would be a nice feature to inline default styles with a SPA, but no changes needed in this PR 😊

@danielroe danielroe changed the title fix(nuxt): no inline styles for client side rendering fix(nuxt): don't inline styles for per-request ssr: false Oct 12, 2022
@danielroe danielroe merged commit 6ef6eae into nuxt:main Oct 12, 2022
@danielroe danielroe mentioned this pull request Oct 18, 2022
Merged
7 tasks
@danielroe danielroe added the 3.x label Jan 19, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@danielroe danielroe danielroe approved these changes

Assignees
No one assigned
Labels
3.x
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

x-nuxt-no-ssr header: globalThis.__buildAssetsURL is not a function
3 participants
@Alex--C @danielroe @alex-canals